<template>
      <div class="clr-black medium-bot">
            <div class="constraint">
                  <div class="meta-tle-box">
                        <h2>{{ propData.titleIsShow ? '欢迎来到京咛' : '' }}媒体资料库</h2>
                        <p v-if="propData.titleIsShow">
                              媒体库中的图像和视频仅供个人或编辑使用。请求更多信息您可以发送电子邮件至
                              <a href="">gc@tencent.com</a>
                        </p>
                  </div>
                  <div class="mate-nav-area tit-box">
                        <ul class="flex">
                              <li :class="['flex _item-li ali-center relative', { 'meta_active': data.navIndex == index }, !propData.titleIsShow ? 'isIcon' : 'notIcon']"
                                    v-for="(item, index) in navList" :key="index" @click="getNavButtonChange(index)">
                                    <div v-if="!propData.titleIsShow" class="media-icon">
                                          <svg t="1699507169234" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                                v-if="index == 0" xmlns="http://www.w3.org/2000/svg" p-id="43763" width="50"
                                                height="50">
                                                <path d="M180 117.75h498v664H180z" fill="#386BF3" p-id="43764"></path>
                                                <path d="M678 242.25h166v539.5H678z" fill="#C3D2FB" p-id="43765"></path>
                                                <path d="M97 781.75h830v124.5H97zM304.5 242.25h83v415h-83zM470.5 242.25h83v249h-83z"
                                                      fill="#3D4265" p-id="43766"></path>
                                          </svg>
                                          <svg t="1699507413280" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                                v-else-if="index == 1" xmlns="http://www.w3.org/2000/svg" p-id="54263"
                                                width="50" height="50">
                                                <path d="M704 106.666667a170.666667 170.666667 0 0 1 170.666667 170.666666v576.362667a64 64 0 0 1-93.952 56.576L512 768l-268.714667 142.272A64 64 0 0 1 149.333333 853.696V277.333333a170.666667 170.666667 0 0 1 170.666667-170.666666h384z m-180.928 194.133333c-14.72-5.845333-31.573333 0.789333-37.696 14.826667l-19.989333 45.866666a28.757333 28.757333 0 0 1-24.32 16.853334l-51.882667 3.968a29.312 29.312 0 0 0-19.584 9.536 26.666667 26.666667 0 0 0 3.136 38.784l39.552 32.32c8.192 6.698667 11.776 17.237333 9.28 27.264l-12.074667 48.32a26.453333 26.453333 0 0 0 3.413334 20.736c8.32 12.970667 26.048 17.066667 39.637333 9.130666l44.437333-25.898666a30.016 30.016 0 0 1 30.037334 0l44.437333 25.898666c6.485333 3.797333 14.293333 4.970667 21.717333 3.285334 15.488-3.52 25.045333-18.346667 21.333334-33.152l-12.074667-48.32c-2.496-10.026667 1.066667-20.565333 9.28-27.264l39.552-32.32a27.093333 27.093333 0 0 0 9.984-18.709334c1.28-15.146667-10.56-28.394667-26.453333-29.610666l-51.882667-3.968a28.757333 28.757333 0 0 1-24.32-16.853334l-19.968-45.866666a28.202667 28.202667 0 0 0-15.573333-14.848z"
                                                      fill="#1AB370" p-id="54264"></path>
                                          </svg>
                                          <svg t="1699507466052" class="icon" viewBox="0 0 1241 1024" version="1.1" v-else
                                                xmlns="http://www.w3.org/2000/svg" p-id="56193" width="50" height="50">
                                                <path d="M193.84646453 62h872.72727276c60.00000029 0 109.09090898 49.09090869 109.09090899 109.09090898v681.81818204c0 60.00000029-49.09090869 109.09090898-109.09090899 109.09090898H193.84646453c-60.00000029 0-109.09090898-49.09090869-109.09090898-109.09090898V171.09090898c0-60.00000029 49.09090869-109.09090898 109.09090898-109.09090898z"
                                                      fill="#2F77F1" p-id="56194"></path>
                                                <path d="M84.75555555 225.63636348h1090.90909072v54.54545449H84.75555555v-54.5454545z m673.63636377 340.90909101c9.5454545 5.4545458 15.00000029 16.36363653 15.0000003 27.27272725s-5.4545458 21.81818145-15.0000003 27.27272724L589.30101004 726.09090928c-9.5454545 5.4545458-21.81818145 5.4545458-31.36363594-1e-8-9.5454545-5.4545458-16.36363653-16.36363653-15.00000029-27.27272724V490.18181855c0-10.90909073 5.4545458-21.81818145 15.00000029-27.27272724 9.5454545-5.4545458 21.81818145-5.4545458 31.36363594 0L758.39191932 566.54545449z"
                                                      fill="#AFFCFE" p-id="56195"></path>
                                          </svg>
                                    </div>
                                    <p>{{ item.text }}</p>
                              </li>
                        </ul>
                  </div>
                  <div class="mate-image-area">
                        <ul :class="['grid', data.navIndex == 0 || data.navIndex == 1 ? 'img-grid' : 'vd-grid']">
                              <li class="flex flex-column" v-for="(item, index) in 8" :key="index">
                                    <div class="mt-vi-box relative">
                                          <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                                                alt="" srcset="">
                                          <div class="vd-start-icon flex ali-center jus-center" v-if="data.navIndex == 2">
                                                <svg t="1699517887563" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                                      xmlns="http://www.w3.org/2000/svg" p-id="88305" width="40"
                                                      height="40">
                                                      <path d="M166.4 806.4V217.6c0-68.266667 72.533333-110.933333 128-76.8l512 294.4c59.733333 34.133333 59.733333 123.733333 0 157.866667l-512 294.4c-55.466667 29.866667-128-12.8-128-81.066667z"
                                                           fill="#fff"  p-id="88306"></path>
                                                </svg>
                                          </div>
                                          <div class="preview-icon flex ali-center jus-center" v-else>
                                                <svg t="1699513773993" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                                      xmlns="http://www.w3.org/2000/svg" p-id="74874" width="35" height="35">
                                                      <path d="M468.48 940.8a463.36 463.36 0 1 1 463.36-463.36 463.36 463.36 0 0 1-463.36 463.36z m0-862.72a399.36 399.36 0 1 0 399.36 399.36 400 400 0 0 0-399.36-399.36z"
                                                            fill="#fff" p-id="74875"></path>
                                                      <path d="M167.68 487.04a32 32 0 0 1-32-32 320 320 0 0 1 320-320 32 32 0 0 1 0 64 256 256 0 0 0-256 256 32 32 0 0 1-32 32zM986.88 1016.32a34.56 34.56 0 0 1-22.4-8.96l-120.32-120.96a31.36 31.36 0 1 1 44.8-44.8L1009.92 960a32.64 32.64 0 0 1 0 45.44 34.56 34.56 0 0 1-23.04 10.88z"
                                                            fill="#fff" p-id="74876"></path>
                                                </svg>
                                          </div>
                                    </div>
                                    <p v-if="data.navIndex == 1 || data.navIndex == 2">京咛在美国洛杉矶开设新办公室</p>
                              </li>
                        </ul>
                  </div>
            </div>
      </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'

let propData = defineProps({ titleIsShow: { default: false } })

let navList = [
      {
            text: '企业图片'
      },
      {
            text: '活动图集'
      },
      {
            text: '视频资料'
      }
]

let data = reactive({
      navIndex: 0
})

let getNavButtonChange = (e: number) => {
      data.navIndex = e
}

</script>
